import React, { lazy, Suspense } from "react";
import { Redirect } from "react-router-dom";
import HomeLayout from "../Layout/HomeLayout.js";
import BlankLayout from "../Layout/BlankLayout.js";

/** 用这个组件包装组件，懒加载 */
const SuspenseComponent = Component => props => {
  return (
    <Suspense fallback={null}>
      <Component {...props}></Component>
    </Suspense>
  );
};

const Hot = lazy(() => import("../page/Hot"));
const Recommend = lazy(() => import("../page/Recommend"));
const Search = lazy(() => import("../page/Search"));
const SongsListDetail = lazy(() => import("../page/SongListDetail/index.js"));

/** 导出路由 */
export default [
  {
    component: BlankLayout,
    routes: [
      {
        component: HomeLayout,
        routes: [
          {
            path: "/recommend",
            component: SuspenseComponent(Recommend),
            routes: [
              {
                path: "/recommend/:id",
                component: SuspenseComponent(SongsListDetail)
              }
            ]
          },
          {
            path: "/hot",
            component: SuspenseComponent(Hot)
          },
          {
            path: "/search",
            component: SuspenseComponent(Search)
          },
          {
            exact: true,
            path: "/",
            component: () => <Redirect to="/recommend" />
          }
        ]
      }
    ]
  }
];
